import { Card, Input, Form, Button, message, Col, Row } from "antd";
import React, { useEffect } from "react";
import { getUserInfoByName } from "../../service/useredit";
import { getUserName } from "../../utils/auth";

function PersonalInfo() {
  const [form] = Form.useForm();
  useEffect(() => {
    getUserInfoByName(getUserName())
      .then((res) => {
        if (res.status === "200") {
          const record = res.result[0];
          form.setFieldsValue({
            userName: record.userName,
            userPwd: record.userPwd,
            confirmPwd: record.userPwd,
            email: record.email,
            phone: record.phone,
          });
        } else {
          message.info("获取用户信息失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 3,
      },
    },
  };
  const onFinish = (values) => {
    console.log(values);
  };
  const onFinishFailed = (values) => {
    console.log(values);
  };

  return (
    <Card title="个人设置" headStyle={{ textAlign: "center", fontSize: 20, backgroundColor:"rgb(240,245,245)" }} style={{height:"80%"}}>
      <Row gutter={16} justify="center">
        <Col span={12} >
          <Card title="编辑用户信息" style={{height:"100%", width:"100%"}} headStyle={{textAlign:"center", fontSize:20}}>
            <Form
              name="addUserByManager"
              labelCol={{ span: 4, offset:3 }}
              wrapperCol={{ span: 10 }}
              style={{ width: "100%" }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              form={form}
            >
              <Form.Item
                label="用户名"
                name="userName"
                rules={[
                  {
                    required: true,
                    message: "请输入用户名",
                  },
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                name="userPwd"
                label="密码"
                rules={[
                  {
                    required: true,
                    message: "密码不得为空!",
                  },
                  {
                    pattern: new RegExp(
                      "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$"
                    ),
                    message: "密码为包含英文和数字的6-12位字符！",
                  },
                ]}
                hasFeedback
              >
                <Input />
              </Form.Item>

              <Form.Item
                name="confirmPwd"
                label="确认密码"
                dependencies={["userPwd"]}
                hasFeedback
                rules={[
                  {
                    required: true,
                    message: "请再次确认密码!",
                  },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (!value || getFieldValue("userPwd") === value) {
                        return Promise.resolve();
                      }

                      return Promise.reject(new Error("两次输入的密码不一致!"));
                    },
                  }),
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                name="email"
                label="E-mail"
                rules={[
                  {
                    type: "email",
                    message: "请输入正确的邮箱地址!",
                  },
                  {
                    required: true,
                    message: "邮箱不得为空!",
                  },
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                name="phone"
                label="电话号码"
                rules={[
                  {
                    required: true,
                    message: "请输入您的电话号码!",
                  },
                  {
                    len: 11,
                    message: "请输入正确的电话号码",
                  },
                ]}
              >
                <Input
                  style={{
                    width: "100%",
                  }}
                />
              </Form.Item>
              <Form.Item {...tailFormItemLayout}>
                <Button type="primary" htmlType="submit">
                  确认更改
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        <Col span={12}>
          <Card
            title="最近统计信息"
            extra={<Button type="primary" size="middle">刷新</Button>}
            style={{height:"100%", width:"100%"}}
            headStyle={{textAlign:"center", fontSize:20}}

          >
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
          </Card>
        </Col>
      </Row>
    </Card>
  );
}

export default PersonalInfo;
